<!--  -->
<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide
        v-for="(item, index) in banners"
        :key="index"
        class="swiper-item"
      >
        <a :href="item.link"><img :src="item.image" alt="" @load="imageLoad" /> </a>
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { getHomeMultidata } from "network/home";
export default {
  name: "",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop:true,
        effect:'coverflow',
        autoplay:true,
        slidesPerview:'auto'
      },
      banners: [],
    };
  },
  methods: {
    imageLoad(){
      this.$emit('swiperImageLoad')
    }
  },
  created() {
    getHomeMultidata().then((res) => {
      this.banners = res.data.banner.list;
    });
  },
};
</script>

<style scoped>
.swiper .swiper-item img{
  width: 100%;
}
</style>